<!DOCTYPE html>
<html>
	<!--
	作者：github.com/WangEn
	时间：2018-02-02
	描述：树形菜单的引入，分享自http://fly.layui.com/jie/17979/
	-->
	<head>
		<meta charset="UTF-8">
		<title>文章分类-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../static/css/font.css">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	</head>

	<body>
		<div class="weadmin-nav">
			<span class="layui-breadcrumb">
		        <a href="">首页</a>
		        <a href="">通知管理</a>
		        <a><cite>分类管理</cite></a>
		    </span>
			<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>
		<div class="weadmin-body">
			<div class="weadmin-block">

				<!--<button class="layui-btn" id="expand">全部展开</button>
				<button class="layui-btn" id="collapse">全部收起</button>
				<button class="layui-btn" onclick="WeAdminShow('添加分类','./category-add.html')"><i class="layui-icon"></i>添加</button>
				<span class="fr" style="line-height:40px">共有数据：66 条</span>

				<button class="layui-btn layui-btn-danger" id="deleteBatch"><i class="layui-icon"></i>批量删除</button>
				-->
				<button class="layui-btn"    id="addType"><i class="layui-icon">&#xe608;</i>添加类型</button>

			</div>

			<div id="demo"></div>


			<div>
				<table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>
			</div>

		</div>
		<script src="/assets/js/jquery.min.js" charset="utf-8"></script>
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		<!--
		<script src="category.js" type="text/javascript" charset="utf-8"></script>
		-->

	<script type="text/javascript">
		$(function () {

			var webPath = "/big1";

			$("#addType").click(function () {

				var layContent = '<form class="layui-form">' +
						'      <div class="layui-form-item">' +
						'           <label for="roleName" class="layui-form-label">类型名</label>' +
						'           <div class="layui-input-inline">' +
						'                <input type="text" id="typeName-add"  class="layui-input" maxlength="16">' +
						'           </div>' +
						'      </div>' +
						'     <div class="layui-form-item">' +
						'         <label for="mark" class="layui-form-label">描述</label>' +
						'         <div class="layui-input-inline">' +
						'             <textarea type="text" id="mark"  rows="3" cols="15" class="layui-textarea" maxlength="32"/>' +
						'         </div>' +
						'     </div>' +
						' </form>';

				layer.open({
					type: 1,
					// shade: [0],
					shadeClose:true,//空白处关闭
					title: "添加角色", //不显示标题
					area: ['420px', '280px'],
					scrollbar: false,
					content: layContent,
					cancel: function() {},
					btn:["添加","取消"],
					btn1:function () {//状态1正常0禁用
						var typeName = $("#typeName-add").val();
						var mark = $("#mark").val();
						var obj = {typeName:typeName,mark:mark };

						$.ajax({
							headers:{
								id:"admin"
							},
							url: webPath+"/noticeType/insert",
							type: "POST",
							data:JSON.stringify(obj),
							contentType: 'application/json;charset=utf-8',
							success: function(data) {
								if (data.errorCode == "0") {
									layer.closeAll();
									layer.msg("添加成功");
									setTimeout(function () {
										initData();
									},300)

								}else layer.msg("添加失败  "+JSON.stringify(data))

							},
							error: function(xhr, type, errorThrown) {
								layer.msg("失败  "+xhr.responseJSON + "  "+errorThrown)
							}
						})//ajax

					},
				});



			});

			$("#search-role").click(function () {
				initData();
			});

			$("#search-reset").click(function () {
				$("#roleName").val("");
				initData();
			});


			initData();
			function initData() {
				layui.use(['form', 'table','layer'] , function () {  // 引入 table模块
					var table = layui.table;
					var form = layui.form;
					var layer = layui.layer;
					table.render({
						id:"dataTable",//
						elem: '#layui_table_id',//指定表格元素
						url: webPath+'/noticeType/getListByMapPage',  //请求路径
						contentType: 'application/json',
						cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
						,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
						,even: true    //隔行换色
						,page: true  //开启分页
						,limits: [5,10,20]  //每页条数的选择项，默认： 。
						,limit: 5 //每页默认显示的数量
						,method:'post'  //提交方式
						,where: {
							/*currentPage: 1,
							pageSize: 5,*/
							roleName:$("#roleName").val()
						}
						,request: {//用于对分页请求的参数：page、limit重新设定名称，如：
							pageName: 'currentPage' //页码的参数名称，默认：page
							,limitName: 'pageSize' //每页数据量的参数名，默认：limit
						}
						,parseData: function(res){ //res 即为原始返回的数据
							return {
								"code": res.errorCode, //解析接口状态
								"count": res.body.totalRecord, //解析数据长度
								"data": res.body.list //解析数据列表
							};
						}
						,cols: [[
							{type:'checkbox'}, //开启多选框
							{
								field: 'typeName',
								title: '类型名',
								sort: true   // 默认为 false,true为开启排序
							},
							{
								field: 'mark',
								title: '描述',
							},
							{
								field: 'id',
								title: '操作',   //列名
								templet:function (d) {//&#xe642;  &#xe63c; &#xe640;
									return '<button class="layui-btn" lay-event="editRole" >编辑 </button> ';
								}
							},
						]]
						//,toolbar:".mytoolbar"
						,done: function(res, curr, count) {

							table.on('tool(dataTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
								var data = obj.data //获得当前行数据（json格式的键值对）
										,layEvent = obj.event //获得 lay-event 对应的值（编辑、删除、添加）
										,editList=[]; //存放获取到的那条json数据中的value值（不放key）
								$.each(data,function(name,value) {//循环遍历json数据
									editList.push(value);//将json数据中的value放入数组中（下面的子窗口显示的时候要用到）
								});

								if(layEvent === 'editRole') editType(data);


							});

							/* table.on('row(dataTable)', function(obj){
								 console.log(obj.tr) //得到当前行元素对象
								 console.log(obj.data) //得到当前行数据
							 });*/


						}
					});
				});
			}

			function editType(elem){
				var layContent = '<form class="layui-form">' +
						'      <div class="layui-form-item">' +
						'           <label for="typeName-edit" class="layui-form-label">类型名</label>' +
						'           <div class="layui-input-inline">' +
						'                <input type="text" id="typeName-edit" maxlength="16" class="layui-input">' +
						'           </div>' +
						'      </div>' +
						'     <div class="layui-form-item">' +
						'         <label for="mark-edit" class="layui-form-label">描述</label>' +
						'         <div class="layui-input-inline">' +
						'             <textarea type="text" id="mark-edit"  rows="2" cols="15" class="layui-textarea" maxlength="32"/>' +
						'         </div>' +
						'     </div>' +
						' </form>';

				layer.open({
					type: 1,
					// shade: [0],
					shadeClose:true,//空白处关闭
					title: "修改类型", //不显示标题
					area: ['420px', '380px'],
					scrollbar: false,
					content: layContent,
					cancel: function() {},
					btn:["修改","取消"],
					success:function () {
						layui.use('form', function(){
							var form = layui.form;
							$("#typeName-edit").val(elem.typeName);
							$("#mark-edit").val(elem.mark);
							form.render(); //更新全部
						});

					},
					btn1:function () {//状态1正常0禁用
						var typeName = $("#typeName-edit").val();
						var mark = $("#mark-edit").val();
						var obj = {id:elem.id,typeName:typeName,mark:mark};

						$.ajax({
							headers:{id:"admin"},
							url: webPath+"/noticeType/updateSelective",
							type: "POST",
							data:JSON.stringify(obj),
							contentType: 'application/json;charset=utf-8',
							success: function(data) {
								if (data.errorCode == "0") {
									layer.closeAll();
									layer.msg("修改成功");
									setTimeout(function () {
										initData();
									},300)

								}else layer.msg("修改失败  "+JSON.stringify(data))

							},
							error: function(xhr, type, errorThrown) {
								layer.msg("失败  "+xhr.responseJSON + "  "+errorThrown)
							}
						})//ajax

					},


				});





			}



			$("#deleteBatch").click(function () {
				layer.confirm("是否删除", {btn: ['确定', '取消'], title: "是否删除"}, function (){
					deleteBatch();
				})

			});

			function deleteBatch() {

				layui.use([ 'table','layer'] , function (){
					var table = layui.table;
					var layer = layui.layer;

					var checkStatus = table.checkStatus('dataTable');
					var data = checkStatus.data;
					if (data.length < 1) {
						layer.msg("请选择要操作的数据");
						return;
					}
					var ids = [];
					$.each(data,function (index,ele) {
						ids.push(ele.id);
					})
					var obj = {ids:ids };

					console.info(obj);

					$.ajax({
						url: webPath+"/noticeType/deleteBatch",
						type: "POST",
						data:JSON.stringify(obj),
						contentType: 'application/json;charset=utf-8',
						success: function(data) {
							if (data.errorCode == "0") {
								layer.msg("删除成功");
								setTimeout(function () {initData();},300);
							}else layer.msg("删除失败 "+JSON.stringify(data))

						},
						error: function(xhr, type, errorThrown) {
							layer.msg("失败  "+JSON.stringify(xhr.responseJSON)  + "  "+JSON.stringify(errorThrown))
						}
					})//ajax

				})

			}


		})

	</script>

	</body>

</html>